<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>角色管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <!--表格头部工具-->
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add">
                    <i class="layui-icon layui-icon-add-circle"></i>添加角色</button>
            </div>
        </script>
        <!--表格-->
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
        <!--表格内部工具-->
        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>
        <!--添加修改页面-->
        <div style="display: none" id="edit">
            <form class="layui-form"  lay-filter="role-filter"  >
                <input  type="hidden" value="" name="roleId">
<!--                <div class="layui-form-item">-->
<!--                    <label class="layui-form-label">角色名</label>-->
<!--                    <div class="layui-input-block">-->
<!--                        <select name="rolename" id="rolename">-->
<!--&lt;!&ndash;                            <option>&#45;&#45;请选择&#45;&#45;</option>&ndash;&gt;-->
<!--&lt;!&ndash;                            <option value="1">超级管理员</option>&ndash;&gt;-->
<!--&lt;!&ndash;                            <option value="2">学生管理员</option>&ndash;&gt;-->
<!--&lt;!&ndash;                            <option value="3">课程管理员</option>&ndash;&gt;-->
<!--&lt;!&ndash;                            <option value="3">菜单管理员</option>&ndash;&gt;-->
<!--&lt;!&ndash;                            <option value="3">教师管理员</option>&ndash;&gt;-->
<!--                        </select>-->
<!--&lt;!&ndash;                        <input type="text" value="" name="userName" class="layui-input">&ndash;&gt;-->
<!--                    </div>-->
<!--                </div>-->

                <div class="layui-form-item">
                    <label class="layui-form-label">角色名</label>
                    <div class="layui-input-block">
                        <input type="text" value="" placeholder="请输入角色名" name="rolename" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">角色描述</label>
                    <div class="layui-input-block">
                        <textarea name="roleremark" placeholder="请输入内容" class="layui-textarea"></textarea>
                    </div>

                </div>

<!--                <div class="layui-form-item">-->
<!--                    <label class="layui-form-label">角色描述</label>-->
<!--                    <div class="layui-input-block">-->
<!--                        <select name="roleremark" id="roleremark"> &lt;!&ndash;动态获取-&ndash;&gt;-->
<!--&lt;!&ndash;                            <option>&#45;&#45;请选择&#45;&#45;</option>&ndash;&gt;-->
<!--&lt;!&ndash;                            <option value="1">管理所有</option>&ndash;&gt;-->
<!--&lt;!&ndash;                            <option value="2">学生</option>&ndash;&gt;-->
<!--&lt;!&ndash;                            <option value="3">管理课程</option>&ndash;&gt;-->
<!--&lt;!&ndash;                            <option value="3">管理菜单页面</option>&ndash;&gt;-->
<!--&lt;!&ndash;                            <option value="3">教师</option>&ndash;&gt;-->
<!--                        </select>-->
<!--                    </div>-->
<!--                </div>-->

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                    </div>
                </div>
            </form>
            <!--
                  <div class="layui-upload-drag" id="test10">
                      <i class="layui-icon"></i>
                      <p>点击上传，或将文件拖拽到此处</p>
                      <div class="layui-hide" id="uploadDemoView">
                          <hr>
                          <img src="" alt="上传成功后渲染" style="max-width: 196px">
                      </div>
                  </div>
                  <div class="layui-form-item">
                      <div class="layui-input-block">
                          <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                      </div>
                  </div>
              </form>-->
        </div>
    </div>
</div>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table','upload'], function () {
        var $ = layui.jquery,
            form = layui.form,
            upload=layui.upload,
            table = layui.table;
        var index;
        //表格的信息字段所在处
        table.render({
            elem: '#currentTableId',
            url: '/role/findByPage',
            toolbar: '#toolbarDemo',

            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            //
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'roleId', title: '角色ID', width: 120},
                {field: 'rolename', width:140, title: '角色名字'},
                {field: 'roleremark', width: 140, title: '角色描述'},
                {title: '操作', minWidth: 140, toolbar: '#currentTableBar', align: "center"}
            ]],
            limits: [10,50, 100],
            limit: 10,
            page: true,
            skin: 'line'
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            console.log(result)

            //执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                }
                , where: data.field

            }, 'data');
            return false;
        });

        /**
         * toolbar监听事件
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                //把当前隐藏的div进行窗口展示
                index = layer.open({
                    title: '添加角色',
                    type: 1,
                    shade: 0.2,
                    area: ['600px', '500px'],
                    maxmin:true,
                    content: $("#edit")
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            } 
        });
        //监听表格里面的工具
        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;//获取这一行的数据  被点击的的这一行
            //先给表单赋值  名字不一致一个个赋值
            /* form.val("drug-filter",{
                 "druNo":data.druNo,
                 "druName":data.druName
             });*/
            console.log(data);
            //设置表单所以表单元素的值
            form.val("role-filter",data);
            //img  单独设置
            // layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', data.druImgPath);
            //修改  打开新的窗口 进行信息编辑
            if (obj.event === 'edit') {
                var index = layer.open({
                    title: '编辑角色',
                    type: 1,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: $("#edit")
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'delete') {//删除的当前
                layer.confirm('真的删除行么', function (index) {
                    console.log(index);
                    //先请求后端做删除操作
                    $.getJSON("/role/delById", {id:data.roleId},
                        function(resultData){//响应成功的回调函数
                            //  code  请求状态  data 数据 msg错误消息
                            console.log(index);
                            if(resultData.code==0){
                                layer.msg("删除成功");
                                //页面自动刷新
                                location.reload();
                            }else{
                                layer.msg("删除失败,请联系管理员");
                            }
                            //业务判断
                        });
                    layer.close(index);
                });
            }
        });


        //修改添加的事件
        form.on('submit(demo1)', function (data) {
            //输出打印表单的字段信息:
            console.log(data.field);
            var  data=data.field;
            //怎么是修改还是添加?
            if(data.roleId==""){
                console.log("添加");//id自增
                //请求后端新增
                $.post("/role/save",data,
                    function(resultData){//后端响应成功后返回的数据结果
                        //  code  请求状态  data 数据 msg错误消息
                        console.log(resultData);
                        if(resultData.code==0){
                            layer.msg("添加成功");
                            //页面自动刷新
                            location.reload();
                        }else{
                            layer.msg("添加失败,请联系管理员");
                        }
                        //业务判断
                    }, "json");
            }
            else{
                console.log("修改");//根据id修改
                //请求后端做修改
                $.post("/role/update",data ,
                    function(resultData){//后端响应成功后返回的数据结果
                        //  code  请求状态  data 数据 msg错误消息
                        console.log(resultData);
                        if(resultData.code==0){
                            layer.msg("修改成功");
                            //页面自动刷新
                            location.reload();
                        }else{
                            layer.msg("修改失败,请联系管理员");
                        }
                        //业务判断
                    }, "json");
            }
            //关闭当前窗口
            layer.close(index);
            return false;
        });
    });
</script>

</body>
</html>